<x-row>
  <x-col span="24">
    <x-input placeholder="请输入域名" after=".com"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入电话" before="0728"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入网址" before="http://" after=".com"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入网址" [before]="beforeSelectTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入网址" [after]="afterSelectTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入网址" [before]="beforeSelectTpl" [after]="afterSelectTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeButtonTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterButtonTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeButtonTpl" [after]="afterButtonTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeInputTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterInputTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeInputTpl" [after]="afterInputTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeDatePickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterDatePickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeDatePickerTpl" [after]="afterDatePickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeAutoCompleteTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterAutoCompleteTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeAutoCompleteTpl" [after]="afterAutoCompleteTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeCascadeTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterCascadeTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeCascadeTpl" [after]="afterCascadeTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeColorPickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterColorPickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeColorPickerTpl" [after]="afterColorPickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeTimePickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [after]="afterTimePickerTpl"></x-input>
  </x-col>
  <x-col span="24">
    <x-input placeholder="请输入文字" [before]="beforeTimePickerTpl" [after]="afterTimePickerTpl"></x-input>
  </x-col>
</x-row>
<ng-template #beforeSelectTpl>
  <x-select [style.width.rem]="5" [data]="['http://', 'ws://', 'file://']"></x-select>
</ng-template>
<ng-template #afterSelectTpl>
  <x-select [style.width.rem]="5" [data]="['.com', '.cn', '.org']"></x-select>
</ng-template>
<ng-template #beforeButtonTpl>
  <x-button>查询</x-button>
</ng-template>
<ng-template #afterButtonTpl>
  <x-button icon="fto-search"></x-button>
</ng-template>
<ng-template #beforeInputTpl>
  <x-input [style.width.%]="30"></x-input>
</ng-template>
<ng-template #afterInputTpl>
  <x-input [style.width.%]="30"></x-input>
</ng-template>
<ng-template #beforeDatePickerTpl>
  <x-date-picker [style.width.rem]="10"></x-date-picker>
</ng-template>
<ng-template #afterDatePickerTpl>
  <x-date-picker [style.width.rem]="10"></x-date-picker>
</ng-template>
<ng-template #beforeAutoCompleteTpl>
  <x-auto-complete
    [style.width.rem]="10"
    [data]="['aaaa', 'bbbb', 'cccc', 'dddd', 'aaa', 'bbb', 'ccc', 'ddd']"
    placeholder="输入下拉匹配，如：aa"
  ></x-auto-complete>
</ng-template>
<ng-template #afterAutoCompleteTpl>
  <x-auto-complete
    [style.width.rem]="10"
    [data]="['aaaa', 'bbbb', 'cccc', 'dddd', 'aaa', 'bbb', 'ccc', 'ddd']"
    placeholder="输入下拉匹配，如：aa"
  ></x-auto-complete>
</ng-template>
<ng-template #beforeCascadeTpl>
  <x-cascade [style.width.rem]="10" [data]="cascadeData"></x-cascade>
</ng-template>
<ng-template #afterCascadeTpl>
  <x-cascade [style.width.rem]="10" [data]="cascadeData"></x-cascade>
</ng-template>
<ng-template #beforeColorPickerTpl>
  <x-color-picker [style.width.rem]="10"></x-color-picker>
</ng-template>
<ng-template #afterColorPickerTpl>
  <x-color-picker [style.width.rem]="10"></x-color-picker>
</ng-template>
<ng-template #beforeTimePickerTpl>
  <x-time-picker [style.width.rem]="10"></x-time-picker>
</ng-template>
<ng-template #afterTimePickerTpl>
  <x-time-picker [style.width.rem]="10"></x-time-picker>
</ng-template>
